<template>
  <a-menu
    v-model:openKeys="openKeys"
    v-model:selectedKeys="selectedKeys"
    theme="light"
    mode="inline"
    @select="select"
    :inlineIndent="24"
    class="menuBox"
    :inline-collapsed="collapsed"
    :class="{ 'custom-box': collapsed }"
  >
    <template v-for="item in getRouteList.children" :key="item.path">
      <template v-if="!item.children || item.meta.hiddenChild">
        <RouterLink :to="item.path">
          <a-menu-item :key="item.path" v-if="!item.meta.hidden">
            <div class="menuListItem">
              <SvgIcon
                class="iconDef"
                color="#828d99"
                :name="item?.meta?.icon || ''"
                width="20"
                height="20"
                v-if="item?.meta?.icon"
              />
              <SvgIcon
                class="iconSelected"
                :name="item?.meta?.icon + '-selected'"
                width="20"
                height="20"
                v-if="item?.meta?.icon"
              />
            </div>
            {{ item.meta.menuName }}
          </a-menu-item>
        </RouterLink>
      </template>
      <template v-else>
        <subMenu :key="item.path" :menu-info="item" />
      </template>
    </template>
  </a-menu>
  <div class="collapse-box">
    <MenuUnfoldOutlined @click="activeMenu" v-if="collapsed" />
    <MenuFoldOutlined @click="activeMenu" v-else />
  </div>
</template>
<script lang="ts" setup>
import subMenu from './subMenu.vue';
import { useRouteStore } from '@/store/modules/routeMenu';
import { useGlobal } from '@/store/modules/global';
import { useApplicationStore } from '@/store/modules/app';
import { storeToRefs } from 'pinia';
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
const appStore = useApplicationStore();
const { setExpandedId, setSelectedId } = appStore;
const { selectedKeys, getRouteList } = storeToRefs(useRouteStore());
const { setSelectValue } = useRouteStore();
const { collapsed } = storeToRefs(useGlobal());
const { setMenuCollapsed } = useGlobal();
const route = useRoute();

const activeMenu = () => {
  setMenuCollapsed(!collapsed.value);
};
// 默认打开的节点
const openKeys = ref([]);
watch(
  () => route.path,
  (val) => {
    setSelectValue(val);
  },
  { deep: true, immediate: true },
);
const select = (item: any) => {
  if (['/system/applicationManagement'].includes(item.key)) {
    setExpandedId('');
    setSelectedId('');
  }
};
</script>
<style lang="less" scoped>
.menuListItem {
  display: flex;
  align-items: center;
  margin-right: 8px;
  gap: 8px;
  justify-content: center;
  border-radius: 10px;
}
:deep(.ant-menu-title-content) {
  display: flex;
  align-items: center;
}

.menuBox {
  margin-top: 24px;
  :deep(.ant-menu-item) {
    height: 40px;
    width: calc(100% - 16px);
    margin: 8px;
    border-radius: 2px;
    padding: 10px 16px !important;
    color: #1c2126;
    &:hover {
      .iconSelected {
        display: inline-block;
      }
      .iconDef {
        display: none;
      }
    }
  }
  :deep(.ant-menu-item::after) {
    border-right: none;
  }
  :deep(.ant-menu-item-selected) {
    color: #1890ff !important;
    .iconSelected {
      display: inline-block;
    }
    .iconDef {
      display: none;
    }
  }
}
.custom-box {
  :deep(.ant-menu-title-content) {
    transform: translate(-9px, -9px);
  }
}
.iconSelected {
  display: none;
}
.collapse-box {
  height: 48px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #eaecef;
  position: absolute;
  bottom: 0px;
  left: 0px;
}
</style>
